<template>
	<view>
		<!-- 导航栏 -->
		<!-- <uni-nav-bar left-icon="contact-filled" title="工作台" fixed statusBar @clickLeft="showMember=true" /> -->

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="2000">
			<view class="title-box">
				<text>工作台</text>
			</view>
		</z-nav-bar>
		<view class="">

			<view class="topInfo">
				<view class="accountBox" @click="showMember=true">
					<u-avatar src="/static/other/login-logo-dev.png"></u-avatar>
					<!-- <u-avatar src="/static/other/login-logo-prod.png"></u-avatar> -->
					<view class="versionInfo">
						<view style="font-size: 32rpx;font-weight: bold;">运营助手</view>
						<view style="font-size: 26rpx;">{{memberInfo.roleName}}</view>
					</view>
				</view>

				<view class="otherBox" v-if="false">
					<view class="titleItem">
						<text>归属部门</text>
						<text>{{memberInfo.deptName}}</text>
					</view>
					<view class="titleItem">
						<text>归属门店</text>
						<text>{{memberInfo.storeName}}</text>
					</view>
					<view class="titleItem">
						<text>角色</text>
						<text>{{memberInfo.roleName}}</text>
					</view>
				</view>

			</view>

			<view class="item" style="padding-top: 20rpx; position: relative;top: -36rpx;border-radius: 16rpx;">
				<view style="margin: 10rpx 20rpx 30rpx;color: #333;font-size: 30rpx;font-weight: bold;">常用工具</view>

				<view class="">
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item, index) in datalist" :key="index" @click="businessClick(item.code)">
							<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" :size="22"></u-icon> -->
							<image style="width: 72rpx;height: 72rpx;" :src="item.icon"></image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>


		<!-- 侧边栏 -->
		<u-popup :show="showMember" @close="showMember = false" mode="left">
			<view class="container">
				<view class="topBox">
					<u-avatar></u-avatar>
					<view class="memberInfo">
						<text>{{memberInfo.name}}</text>
						<text>{{memberInfo.roleName}}</text>
					</view>
				</view>

				<u-line margin="40rpx 0"></u-line>

				<view class="otherBox">
					<view class="itemContent">
						<text>手机号</text>
						<text>{{memberInfo.phone}}</text>
					</view>
					<view class="itemContent">
						<text>归属部门</text>
						<text>{{memberInfo.deptName}}</text>
					</view>
					<view class="itemContent">
						<text>归属门店</text>
						<text>{{memberInfo.storeName}}</text>
					</view>
					<view class="itemContent">
						<text>角色</text>
						<text>{{memberInfo.roleName}}</text>
					</view>
					<view class="itemContent">
						<text>创建时间</text>
						<text>{{memberInfo.createTime}}</text>
					</view>
				</view>

				<view class="loginOut">
					<u-button plain text="退出登录" @click="clickLoginOut"></u-button>
				</view>

			</view>
		</u-popup>


		<!-- 确认退出登录弹框 -->
		<u-modal title="提示" content="您确定退出登录吗?" :show="showLoginOut" showCancelButton @confirm="confirmLoginOut"
			@cancel="showLoginOut = false">
		</u-modal>



		<!-- 底部导航 -->
		<HomeTabbar :tab="tabIndex"></HomeTabbar>
	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar/tabbar';
	import {
		apiProfile
	} from '@/api/login-api.js'
	export default {
		components: {
			HomeTabbar,
		},
		data() {
			return {
				config: {
					title: '工作台',
					color: '#fff',
					fontSize: '16px',
					leftSlot: true,
					leftSlotSwitch: true,
					back: false,
					backgroundColor: [1, ['#3699ff', '#0075ee']],
					statusBarFontColor: '#ffffff'
				},
				showMember: false,
				showLoginOut: false,
				memberInfo: {},

			}
		},
		computed: {
			navigationList() {
				return this.$store.state.initData.initData.navigationList || [];
			},
			tabIndex() {
				var tabIndex = -1;
				this.navigationList?.map((item, index) => {
					if (item.name == "工作台") {
						tabIndex = index;
					}
				})
				return tabIndex;
			},
			commonToolsList() {
				return this.$store.state.initData.initData.commonToolsList || [];
			},
			datalist() {
				var datalist = [];
				for (let item of this.commonToolsList) {
					switch (Number(item.id)) {
						case 1:
							datalist.push({
								title: '新增订单',
								icon: '../../static/worktable/tools_order.png',
								code: 1
							})
							break;
						case 2:
							datalist.push({
								title: '新增车辆',
								icon: '../../static/worktable/tools_car.png',
								code: 2
							})
							break;

					}
				}
				return datalist;
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif

			this.getMemberInfo();
		},
		methods: {

			businessClick(code) {
				switch (code) {
					case 1: //新增订单
						uni.navigateTo({
							// url: '/workbench/order/orderType'
							url: '/workbench/order/shortRentOrder/add?type=1'
						})
						break;
					case 2: //新增车辆
						uni.navigateTo({
							url: '/workbench/car/add'
						})
						break;
					case 3: //客户新增
						break;
					case 4: //车辆借调
						uni.navigateTo({
							url: '/workbench/seconded/add'
						})
						break;
					default:
						break;
				}
			},

			getMemberInfo() {
				apiProfile().then(res => {
					this.memberInfo = res.data;
					this.$store.commit('user/saveUserInfo', res.data);
				})
			},
			clickLoginOut() {
				this.showMember = false;
				this.showLoginOut = true;
			},
			confirmLoginOut() {
				uni.clearStorageSync();
				this.$store.commit('user/saveIsLogin', false);
				this.$store.commit('user/saveToken', '');
				this.$store.commit('user/saveUserInfo', null);
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 44rpx 20rpx 34rpx;
		width: 450rpx;

	}

	.topInfo {
		padding-bottom: 30rpx;
		width: 100%;
		background: linear-gradient(to right, #3699ff, #0075ee);

		.accountBox {
			padding: 40rpx;
			display: flex;
		}

		.versionInfo {
			margin-left: 20rpx;
			color: #fff;
		}

		.otherBox {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.titleItem {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					color: #A9E2D5;
					font-size: 24rpx;
				}

				text:nth-child(2) {
					margin-top: 10rpx;
					color: #fff;
				}
			}
		}
	}

	.topBox {
		margin-top: 60rpx;
		display: flex;
		align-items: center;

		.memberInfo {
			margin: 0 10rpx;
			display: flex;
			flex-direction: column;

			text {
				display: block;
				color: $black33;
				font-size: $xz-font-size-24;
			}
		}
	}

	.otherBox {
		.itemContent {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 0;

			text {
				color: $black33;
				font-size: $xz-font-size-24;
			}

			text:nth-child(1) {
				color: #999;
			}
		}
	}

	.loginOut {
		position: absolute;
		bottom: 40rpx;
		left: 20rpx;
		right: 20rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #333;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>